<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
       .box {
          /* 溢出显示省略号: 单行文本溢出显示省略号 */
          /* 步骤:
             1. 给文字所在父容器设置固定的宽度
             2. (如果内容是汉字,汉字超过父容器宽度后自动换行,如果是字母则超过父容器宽度不换行)
             3. 保证文字始终在一行显示:  word-break: keep-all;
             4. 超出的文字隐藏:  overflow: hidden;
             5. 设置文字溢出显示省略号:  text-overflow: ellipsis;
          */
         width: 190px;
         height: 100px;
         border: 1px solid blue;
         /* 强制换行 */
         /* word-break: break-all; */
         /* 保持始终在一行显示 */
         word-break: keep-all;
         overflow: hidden;
         /* 文字溢出显示省略号 */
         text-overflow: ellipsis;
       } 
   
  </style>
</head>
<body>
     <div class="box">
          阿斯顿发顺丰打发大水放大阿斯顿发顺丰打发大水放大
     </div>
</body>
</html>